<template>
  <view>
    <view class="main">
      <u-form :model="form" ref="uForm" label-width="150" >
        <u-form-item label="姓名" prop="realName"><u-input v-model="form.realName" placeholder="请输入姓名"/></u-form-item>
        <u-form-item label="电话号码" prop="userPhone"><u-input v-model="form.userPhone" :maxlength="11" placeholder="请输入手机号码"/></u-form-item>
        <u-form-item label="申请理由" prop="applyReason"><u-input v-model="form.applyReason" :height="300" type="textarea" :maxlength="300" placeholder="请输入申请理由"/></u-form-item>
      </u-form>
      <view class="buy__btn" @click="submit">
        提交
      </view>
    </view>
    <u-toast ref="uToast"/>
    <w-loading text="正在提交..." mask="true" click="true" ref="loading"></w-loading>
  </view>
</template>
<script>
import {applyProxy} from "../../api/shop";

export default {
  data() {
    return {
      form:{
        realName:"",
        userPhone:"",
        applyReason:""
      },
      rules: {
        realName: [
          {
            required: true,
            message: '请输入姓名',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur,change'
          }
        ],
        userPhone: [
          {
            required: true,
            message: '请输入手机号码',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur,change'
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change','blur'],
          }
        ],
        applyReason: [
          {
            required: true,
            message: '请输入申请理由',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur,change'
          },
          {
            min: 1,
            message: '简介不能少于30个字',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods:{
    submit(){
      this.$refs.loading.open()
      this.$refs.uForm.validate(valid => {
        if (valid) {
          applyProxy(this.form).then(res =>{
            this.$refs.loading.close()
            if (res.code == 200){
              this.$u.toast("提交成功");
              setTimeout(function (){
                uni.navigateBack({
                  delta: 1
                });
              },1000)

              this.$refs.uForm.resetFields()
            }
          }).catch(err =>{
            this.$refs.loading.close()

          })
        } else {

        }
      });
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
}
</script>

<style lang="scss" scoped>
.main{
  width: 90%;
  margin: 0 auto;
}
.buy__btn {
  width: 90%;
  height: 80rpx;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
  line-height: 80rpx;
  background: #D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%);
  border-radius: 50rpx;
  letter-spacing: 5rpx;

}

</style>
